import { defineComponent } from 'vue';
import { useTabViewsStore } from '@/stores/modules';
import { CloseOutlined } from '@ant-design/icons-vue';
import {
  ConfigProvider,
  Dropdown,
  Menu,
  MenuItem,
  TabPane,
  Tabs,
  TabsProps,
} from 'ant-design-vue';
import {
  RouteLocationNormalizedLoaded,
  RouteLocationNormalizedLoadedGeneric,
  useRoute,
  useRouter,
} from 'vue-router';

const TabViews = defineComponent({
  name: 'TabViews',
  setup() {
    const route = useRoute();
    const router = useRouter();

    const tabViewsStore = useTabViewsStore();
    const onClose = (
      e: MouseEvent,
      route: RouteLocationNormalizedLoadedGeneric,
    ) => {
      e.stopPropagation();
      tabViewsStore.delTab(route);
    };

    const onTableClick: TabsProps['onTabClick'] = (key) => {
      if (route.path === key) return;
      router.push(key as string);
    };

    const closeAll = () => {
      tabViewsStore.closeAllTab();
      router.replace('/');
    };
    const closeOther = (
      route: RouteLocationNormalizedLoaded,
      index: number,
    ) => {
      tabViewsStore.closeOther(index);
      router.push(route.fullPath);
    };

    return () => (
      <ConfigProvider
        theme={{
          components: {
            Tabs: {
              colorText: '#333',
              fontSize: 14,
              lineWidthBold: 0,
              colorBgElevated: '#fff',
              colorSplit: '#3f4b5f',
              colorBgContainer: 'transparent',
            },
          },
        }}
      >
        {!tabViewsStore.hideTab && (
          <Tabs
            class='tab-views'
            activeKey={route.path}
            tabBarGutter={12}
            onTabClick={onTableClick}
            type='card'
          >
            {{
              default: () => {
                return tabViewsStore.getterTabsList.map((tab, index) => {
                  return (
                    <TabPane key={tab.path}>
                      {{
                        tab: () => {
                          return (
                            <Dropdown trigger={['contextmenu']}>
                              {{
                                default: () => (
                                  <div class='custom-tab-bar-style'>
                                    <span class='title mr-2'>
                                      {tab.meta.title}
                                    </span>
                                    {tabViewsStore.getterTabsList.length >
                                      1 && (
                                      <CloseOutlined
                                        class='!m-0'
                                        onClick={(e) => onClose(e, tab)}
                                      />
                                    )}
                                  </div>
                                ),
                                overlay: () => (
                                  <Menu>
                                    <MenuItem
                                      onClick={() => closeOther(tab, index)}
                                    >
                                      关闭其他
                                    </MenuItem>
                                    <MenuItem onClick={() => closeAll()}>
                                      关闭所有
                                    </MenuItem>
                                  </Menu>
                                ),
                              }}
                            </Dropdown>
                          );
                        },
                      }}
                    </TabPane>
                  );
                });
              },
            }}
          </Tabs>
        )}
      </ConfigProvider>
    );
  },
});

export { TabViews };
